<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="text/babel">
    /**
     * JSX的注意事项
     *  1、JSX不是字符串，不用加引号
     *  2、JSX中html标签应该小写，React组件应该大写开头
     *  3、JSX中有且只有一个根标签 const div = <div></div>
     *  4、JSX的标签必须正确结束(自结束标签必须写/) 例如<input type="text" />
     *  5、在JSX中可以使用{}嵌入表达式，类似于vue的{{}}
     *      - 有值的语句就是表达式
     *  6、如果表达式是空值、布尔值、undefined这些值，将不会显示
     *  7、在JSX中，属性值可以直接在标签中设置
     *      - class需要使用className代替
     *      - style必须传对象(样式中要用驼峰命名)
     */
    const name = "洪奇奇";

    function alertFun() {
      alert(123);
    }
    function calc(a, b) {
      return a + b;
    }
    const div = (
      <div>
        <span>我是jsx创建的div</span>
        <br />
        <span>{name}</span>
        <br />
        <span>{calc(1, 6)}</span>
        <br />
        <span>{1 + 1}</span>
        <br />
        <span>{1 > 0 ? "我大于0" : "我不大于0"}</span>
        <br />
        <span>表达式的值为空值{}</span>
        <br />
        <span>表达式的值为false{false}</span>
        <br />
        <span>表达式的值为undefined{undefined}</span>
        <br />
        <button
          className="myButton"
          style={{ backgroundColor: "yellowgreen", fontSize: "24px" }}
          onClick={alertFun}
        >
          我是按钮
        </button>
        <br />
        <input type="text" />
      </div>
    );
    console.log("div:", div);
    const Root = ReactDOM.createRoot(document.getElementById("root"));
    // 将div渲染到根元素中
    Root.render(div);
  </script>
</html>
